<template>
  <div class="main">
    <div class="top-list">
      <div class="center-box">
        <el-input placeholder="请输入条形码" v-model="queryParams.code"></el-input>
        <el-button style="margin-left: 20px" @click="selectCode" type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
    <div class="bottom-list">
      <div class="box-center">
        <el-table
          :data="carList"
          border
          style="width: 100%"
        >
          <el-table-column prop="id" width="80" label="ID"></el-table-column>
          <el-table-column prop="phone" label="手机号"></el-table-column>
          <el-table-column prop="img" label="车辆图片">
            <template slot-scope="scope">
              <el-image style="height: 30px" lazy :src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="id" width="180" label="营运车辆">
            <template slot-scope="scope">
              {{ /1/.test(scope.row.extInfo) ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column prop="licensePlate" label="车牌号"></el-table-column>
          <el-table-column prop="brand" label="品牌名称"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column prop="brand" align="center" label="轮胎信息">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="openTyre(scope.row)">查看轮胎</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog
      title="轮胎信息"
      :visible.sync="payStatus"
      width="1200px"
      :before-close="handleClosePayStatus"
    >
      <el-table
        :data="tyreListArray"
        border
        size="mini"
        style="width: 100%"
      >
        <el-table-column prop="code" label="条形码" min-width="150"></el-table-column>
        <el-table-column prop="patnm" label="花纹" min-width="150"></el-table-column>
        <el-table-column prop="spcnm" label="规格" min-width="150"></el-table-column>
        <el-table-column prop="dot" label="DOT" min-width="150"></el-table-column>
        <el-table-column prop="brnm" label="轮胎品牌" min-width="150"></el-table-column>
        <el-table-column prop="erpid" label="物料编码" min-width="150"></el-table-column>
        <el-table-column prop="scmnm" label="客户编码" min-width="150"></el-table-column>
        <el-table-column prop="createTime" label="安装时间" min-width="180">
          <template slot-scope="scope">

            {{ parseTime(scope.row.installationTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="轮胎位置" min-width="150">
          <template slot-scope="scope">

            {{ position(scope.row.position) }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="是否允许理赔" min-width="150">
          <template slot-scope="scope">

            {{ scope.row.isReparation === 1 ? '否' : '是' }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="120" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="danger" @click="deleteTyreRecord(scope.row)" icon="el-icon-delete" size="mini">删除记录
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">

        <el-button type="primary" @click="payStatus = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { deleteCardRecord, getCarInfoByCode, getTyreById } from '@/api/apiFox'
import { parseTime } from '../../../../utils/ruoyi'

export default {
  data() {
    return {
      currentPage1: 5,
      value1: '',
      pager: {
        total: 10
      },
      form: {},
      payStatus: false,
      tyreListArray: [],
      formData: {
        carId: '',
        code: '',
        position: '',
        size: '',
        sizeImg: '',
        patten: '',
        pattenImg: '',
        specification: '',
        specificationImg: '',
        dot: '',
        dotImg: ''
      },
      dialogVisible: false,
      isEdit: false,
      dialogVisibleTyre: false,
      center: { lng: 117.404, lat: 35.915 },
      mark: { lng: '', lat: '' },
      optionsStore: [],
      queryParams: {
        code: ''
      },
      content: '',
      expandedRowKeys: [],
      carList: [],
      isAdd: false,
      tyreList: [],
      options: [
        { value: '', label: '全部' },
        { value: 0, label: '禁用' },
        { value: 1, label: '启用' }
      ],
      postions: [
        { value: 1, label: '左前' },
        { value: 2, label: '右前' },
        { value: 3, label: '左后' },
        { value: 4, label: '右后' }
      ],
      optionsBrand: [],
      optionsCar: [],
      loading: false,
      tyreForm: {},
      openValue: {}
    }
  },
  methods: {
    selectCode() {
      getCarInfoByCode({ code: this.queryParams.code }).then(res => {
        console.log(res)
        this.carList = [res.data]
      }).catch(err => {
      })
    },

    parseTime,
    openTyre(item) {
      this.openValue = item
      getTyreById({ carId: item.id }).then(res => {

        this.tyreListArray = res
        this.payStatus = true
      }).catch(err => {
        this.payStatus = false
        this.tyreListArray = []
      })
    },
    deleteTyreRecord(item) {
      deleteCardRecord(item.id).then(res => {
        this.$message.success('删除成功')
        this.getTyreRecordList(this.openValue)
      }).catch(err => {
        this.getTyreRecordList(this.openValue)
      })
    },
    handleClosePayStatus() {
      this.payStatus = false
    },
    position(val) {
      switch (val) {
        case 1: {
          return '左前'
        }
        case 2: {
          return '右前'
        }
        case 3: {
          return '左后'
        }
        case 4: {
          return '右后'
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  min-height: 100vh;
  padding: 30px;
  box-sizing: border-box;

  .top-list {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    margin-top: 150px;

    .center-box {
      width: 600px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .bottom-list {
    width: 100%;
    height: 300px;

    display: flex;
    justify-content: center;

    .box-center {
      width: 1200px;
      height: 300px;
    }
  }

  .label {
    font-size: 14px;
    height: 20px;
    margin-bottom: 5px;
  }
}
</style>
